<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        div{
            width: 500px;
            height: 300px;
            background-color: gainsboro;
        }
        span{
            display: block;
            width: 80px;
            height: 50px;
            margin:10px 30px;
            background-color: antiquewhite;
            float: left;
        }
    </style>
</head>
<body>
  <!--
      当子元素都要添加某一个事件的时候，由于循环给子元素绑定事件从性能上来讲
      不是特别的优化，所以子元素把事件委托给父元素进行处理，父元素通过子元素的
      id名称或者是其他的条件判断到底是哪一个子元素接收这个事件
  -->
   <p>北京市</p>
  <button>点击添加span</button>
 <div>
     <span>北京</span>
     <span>上海</span>
     <span>天津</span>
     <span>石家庄</span>
     <span>广州</span>
 </div>
  <script>
      //todo  第一种方法，循环给span添加点击事件
      var spans=document.getElementsByTagName("span");
      var myP= document.getElementsByTagName("p")[0];
//      for(var x  in  spans){
//          //把数组的下标赋值给数组的index，
//          // 因为如果不赋值，那么在点击事件里面获取不到数组的index
//          spans[x].index=x;
//          spans[x].onclick=function(){
//              //获取当前目标的index值
//              var index=this.index;
//                console.log(spans[index].innerHTML);
//              myP.innerHTML=spans[index].innerHTML;
//          }
//      }
      /////////////////////////////////////////////////////////////////
  //todo  第二种方式，通过事件委托的方式，委托给父级元素
      //需要借助事件对象event
      document.getElementsByTagName("div")[0].onclick=function(e){
          var e=e||window.event;//考虑到浏览器的兼容问题
//          console.log(e.target);//查看点击事件的执行目标元素
         var myTarget= e.target;
          if(myTarget.nodeName=="SPAN"){
              console.log("点我了，我是span");
              myP.innerHTML=myTarget.innerHTML;
          }


      };

      document.getElementsByTagName("button")[0].onclick=function(){
          var mySpan=document.createElement("span");
          mySpan.innerHTML="黑龙江";
          document.getElementsByTagName("div")[0].appendChild(mySpan);
      };
//!!!!!!!!!!!重点  事件委托优化代码的性能结构，
// 并且后期动态创建的元素也可以绑上事件




  </script>



</body>
</html>